From: Jasper St. Pierre <jstpierre@mecheye.net>
Date: Sun, 7 Aug 2011 20:48:56 +0000 (-0400)
Subject: layout: Don't create and destroy ripple animations
X-Git-Tag: archive/raspbian/50.5-1+rpi1~1^2~1013^2^2~7967
X-Git-Url: https://dgit.raspbian.org/%22http://www.example.com/cgi/%22/%22http:/www.example.com/cgi/%22?a=commitdiff_plain;h=08e669adde1954be33c35d7e045f58842326441a;p=gnome-shell.git

layout: Don't create and destroy ripple animations

Instead, create three ripples and keep tweening them. This gives a dramatic
speedup when entering the overview, but means that we can't have the same animation
running twice. In this case, we "reset" the currently running ripple animation, but
it is hard to notice unless looking for it.

https://bugzilla.gnome.org/show_bug.cgi?id=656125
---

diff --git a/js/ui/layout.js b/js/ui/layout.js
index cebfb6e0c..8484ca7d9 100644
--- a/js/ui/layout.js
+++ b/js/ui/layout.js
@@ -278,13 +278,22 @@ HotCorner.prototype = {
                              Lang.bind(this, this._onCornerClicked));
         this._corner.connect('leave-event',
                              Lang.bind(this, this._onCornerLeft));
+
+        // Cache the three ripples instead of dynamically creating and destroying them.
+        this._ripple1 = new St.BoxLayout({ style_class: 'ripple-box', opacity: 0 });
+        this._ripple2 = new St.BoxLayout({ style_class: 'ripple-box', opacity: 0 });
+        this._ripple3 = new St.BoxLayout({ style_class: 'ripple-box', opacity: 0 });
+
+        Main.uiGroup.add_actor(this._ripple1);
+        Main.uiGroup.add_actor(this._ripple2);
+        Main.uiGroup.add_actor(this._ripple3);
     },
 
     destroy: function() {
         this.actor.destroy();
     },
 
-    _addRipple : function(delay, time, startScale, startOpacity, finalScale, finalOpacity) {
+    _animRipple : function(ripple, delay, time, startScale, startOpacity, finalScale) {
         // We draw a ripple by using a source image and animating it scaling
         // outwards and fading away. We want the ripples to move linearly
         // or it looks unrealistic, but if the opacity of the ripple goes
@@ -292,25 +301,27 @@ HotCorner.prototype = {
         // 'onUpdate' to give a non-linear curve to the fade-away and make
         // it more visible in the middle section.
 
-        let [x, y] = this._corner.get_transformed_position();
-        let ripple = new St.BoxLayout({ style_class: 'ripple-box',
-                                        opacity: 255 * Math.sqrt(startOpacity),
-                                        scale_x: startScale,
-                                        scale_y: startScale,
-                                        x: x,
-                                        y: y });
-        ripple._opacity =  startOpacity;
+        ripple._opacity = startOpacity;
+
         if (ripple.get_direction() == St.TextDirection.RTL)
             ripple.set_anchor_point_from_gravity(Clutter.Gravity.NORTH_EAST);
-        Tweener.addTween(ripple, { _opacity: finalOpacity,
+
+        ripple.visible = true;
+        ripple.opacity = 255 * Math.sqrt(startOpacity);
+        ripple.scale_x = ripple.scale_y = startScale;
+
+        let [x, y] = this._corner.get_transformed_position();
+        ripple.x = x;
+        ripple.y = y;
+
+        Tweener.addTween(ripple, { _opacity: 0,
                                    scale_x: finalScale,
                                    scale_y: finalScale,
                                    delay: delay,
                                    time: time,
                                    transition: 'linear',
                                    onUpdate: function() { ripple.opacity = 255 * Math.sqrt(ripple._opacity); },
-                                   onComplete: function() { ripple.destroy(); } });
-        Main.uiGroup.add_actor(ripple);
+                                   onComplete: function() { ripple.visible = false; } });
     },
 
     rippleAnimation: function() {
@@ -318,10 +329,10 @@ HotCorner.prototype = {
         // parameters were found by trial and error, so don't look
         // for them to make perfect sense mathematically
 
-        //              delay  time  scale opacity => scale opacity
-        this._addRipple(0.0,   0.83,  0.25,  1.0,    1.5,  0.0);
-        this._addRipple(0.05,  1.0,   0.0,   0.7,    1.25, 0.0);
-        this._addRipple(0.35,  1.0,   0.0,   0.3,    1,    0.0);
+        //                              delay  time  scale opacity => scale
+        this._animRipple(this._ripple1, 0.0,   0.83,  0.25,  1.0,     1.5);
+        this._animRipple(this._ripple2, 0.05,  1.0,   0.0,   0.7,     1.25);
+        this._animRipple(this._ripple3, 0.35,  1.0,   0.0,   0.3,     1);
     },
 
     handleDragOver: function(source, actor, x, y, time) {